<template>
  <view class="relative">
  	<view class="block" :style="{ width: width }">
  		<!-- <view class="block-flex">
  			<view class="location" @click="getLocation">
  				<image class="locationPic" src="@/static/map/getLocation.png"></image>
  			</view>
  			<view class="goList">
  				<text style="color: #fff; font-size: 28rpx">查看列表</text>
  			</view>
  		</view> -->
  		<view class="iceList" :style="{ width: width }">
  			<swiper class="ice" :circular="false" :autoplay="false">
  				<!-- <swiper-item v-for="(item, index) of horizonDeviceList" :key="index"> -->
  				<swiper-item>
  					<view class="ice-item" :style="{ width: Number(width.substr(0, 3)) - 28 + 'px' }">
  						<image style="width:100rpx; height: 100rpx" src="@/static/map/pos80.png" mode="" @click="getLocation(1)"></image>
  						<view class="ice-item-right">
  							<view class="flex">
  								<text v-if="isAddress" style="font-size: 24rpx; color: #111" @click="setInfoState(false)" >
  									{{posInfo.address}}
  								</text>
  								<text v-if="!isAddress" style="font-size: 24rpx; color: #111" @click="setInfoState(true)">
  								{{posInfo.longitude}},{{posInfo.latitude}}
  								</text>
  							</view>
  							<!-- <text style="font-size: 24rpx; color: #333">{{posInfo.gpsTime}}</text>
  							<text style="font-size: 24rpx; color: #333">id:{{ item.id }}</text> -->
  							<view class="u-flex">
  								<text style="font-size: 24rpx; color: #999; margin-right: 36rpx">时间: {{posInfo.gpsTime}}</text>
  								<text style="font-size: 24rpx; color: #999; margin-right: 36rpx">卫星数: {{posInfo.satellites}}</text>
  							</view>
  							<view class="u-flex">
  								<text style="font-size: 24rpx; color: #999; margin-right: 36rpx">速度: {{posInfo.speed}}</text>
  								<text style="font-size: 24rpx; color: #999; margin-right: 36rpx">精度: {{posInfo.accuracy}}</text>
  							</view>
  						</view>
  					</view>
  				</swiper-item>
  			</swiper>
  		</view>
  	</view>
  	<map id="map" name="map" @markertap="markertap" show-location :enable-satellite="enableSatellite" :enable-3D="enable3D" :longitude="center.longitude"
  		:latitude="center.latitude" :style="{ height, width }" @regionchange="drag"></map>
  </view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				userId: 0,
				phonenumber: '',
				mapContext: null,
				markers,
				height: '',
				width: '',
				enableSatellite: true,
				enable3D: true,
				center: {
					longitude: 0,
					latitude: 0
				},
				isAddress : false,
				posInfo:{
					userId: 0,
					dev_no:'',
					phonenumber:'',
					altitude: 0,
					longitude: 0,
					latitude: 0,
					speed: 0,
					accuracy: 0,
					address: '',
					gpsTime: '',
					satellites:0,
					network:0,
					locateType:0
				},
				workInterval: null
			}
		},
		onLoad() {
			const {
				osName,
				screenHeight,
				screenWidth,
				statusBarHeight
			} = uni.getSystemInfoSync();
			this.osName = osName;
			this.height = screenHeight - 132 + 'px';
			this.width = screenWidth + 'px';
			console.log("statusBarHeight:"+statusBarHeight);
			// this.initWebSocket();
		},
		onReady() {
			this.mapContext = uni.createMapContext('map', this);
			// this.getLocation(1);
			let _user = storage.get(constant.userinfo);
			if(_user){
				let u = JSON.parse(_user);
				this.phonenumber = this.gpsInfo.phonenumber = u.phonenumber;
				this.userId = this.posInfo.userId = u.userId;
			}
		},
		computed: {
			
			...mapState(['amapInfo'])
			// horizonDeviceList() {
			// 	if (this.selectedMark && this.selectedMark.length > 0) {
			// 		return this.selectedMark;
			// 	} else {
			// 		if (this.nearestDevice) {
			// 			return [this.nearestDevice];
			// 		} else {
			// 			return [];
			// 		}
			// 	}
			// }
		},
		mounted() {
			console.log('执行到这里');
			this.workInterval = setInterval(this.getlocation(0),5000);
		  // this.timer = setInterval(this.succLocation(), 30000);
			//this.initWebSocket();
		  //this.timer = setInterval(this.getLocation(), 30000);
		  //this.timer = setTimeout(this.succLocation(), 5000);
		  //页面中调用方法
		  // let data = {value:'xx'};
		  // this.$websocket.send(JSON.stringify(data))
		},
		beforeDestroy() {
		  if (this.workInterval) {
		    clearInterval(this.workInterval);
		  }
		},
		onUnload() {
			if (this.workInterval) {
				clearInterval(this.workInterval);
			}
		  },
		  methods: {
			  getlocation(n){
				  this.posInfo.longitude = this.amapInfo.longitude;
				  this.posInfo.latitude = this.amapInfo.latitude;
				  this.posInfo.speed = this.amapInfo.speed;
				  this.posInfo.accuracy = this.amapInfo.accuracy;
				  this.posInfo.address = this.amapInfo.address;
				  this.posInfo.gpsTime = this.amapInfo.gpsTime;
				  this.posInfo.satellites = this.amapInfo.satellites;
				  this.posInfo.network = this.amapInfo.network;
				  this.posInfo.locateType = this.amapInfo.locateType;
				  if(n = 1){
					  this.center.latitude = this.amapInfo.latitude;
					  this.center.longitude = this.amapInfo.longitude;
				  }
			  },
			  markertap(e) {
			  	console.log(e.detail.markerId);
			  	
			  },
			  debounce(func, wait = 500, immediate = false) {
			  	if (timeout !== null) clearTimeout(timeout);
			  	if (immediate) {
			  		const callNow = !timeout;
			  		timeout = setTimeout(() => {
			  			timeout = null;
			  		}, wait);
			  		if (callNow) typeof func === 'function' && func();
			  	} else {
			  		timeout = setTimeout(() => {
			  			typeof func === 'function' && func();
			  		}, wait);
			  	}
			  },
			  drag(e) {
			  	if (this.osName === 'android') {
			  		if (e.type === 'end') {
			  			this.debounce(this.fetchCenter, 700);
			  		}
			  	} else if (this.osName === 'ios') {
			  		if (e.detail.type === 'end' && (e.detail.causedBy === 'drag' || e.detail.causedBy === 'scale')) {
			  			this.debounce(this.fetchCenter, 700);
			  		}
			  	}
			  },
			  fetchCenter() {
			  	// 获取地图可视区的中心点
			  	this.mapContext.getCenterLocation({
			  		success: (res) => {
			  			// this.query.lon = res.longitude;
			  			// this.query.lat = res.latitude;
			  			//this.fetchList();
			  		}
			  	});
			  },
			  ...mapMutations(['setAmapInfo'])
		  }
	}
</script>


<style lang="scss" scoped>
	.pop-device {
		max-height: 800rpx;
	}

	.ice-item-right .flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.pl-20 {
		padding-left: 20rpx;
	}

	.slot-content {
		width: 650rpx;
	}

	.tip .text-center {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.tip .mt-20 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.ice-item-right {
		color: #666;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 30rpx;
	}

	.ice-item {
		display: flex;
		align-items: center;
		flex-direction: row;
		padding: 20rpx 15rpx;
		
		background: #ffffff;
		border-radius: 16rpx;
		margin: 0 28rpx;
	}

	.goList {
		padding: 20rpx 12rpx;
		background-color: #fd8800;
		display: flex;
		align-items: center;
		flex-direction: row;
		border-radius: 8rpx;
	}

	.block-flex {
		padding: 0 28rpx;
		display: flex;
		margin-bottom: 10rpx;
		justify-content: space-between;
		flex-direction: row;
	}

	.block {
		position: fixed;
		bottom: 20rpx;
	}

	.location {
		padding: 20rpx;
		background: #ffffff;
		border-radius: 16rpx;

		.locationPic {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.iceListWrap {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.iceListItem {
		margin-right: 10rpx;
		height: 250rpx;
		background-color: #ffffff;
		text-align: center;
		font-size: 36rpx;
	}

	.relative {
		position: relative;
	}

	.divided {
		position: absolute;
		left: 100%;
		width: 1px;
		height: 24px;
		background: #e3e3e3;
	}

	.u-flex {
		display: flex;
		flex-direction: row;
	}
</style>
